<template>
    <div class="organ-page page">
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
                <span style="margin-left: 10px">教练员详情</span>
            </PlatformCrumb>
            <div class="organ-detail corgannopaddingb">
                <p class="title">基本资料</p>
                <div class="organ-data display-flex-row">
                    <img width="180" height="240" :src="coachData.imgs|filtersImg"/>
                    <div class="organ-con-center">
                        <div class="organ-con-center-item">
                            <p><span>姓名</span>{{ coachData.name }}</p>
                            <p><span>学历</span>{{ coachData.xlName }}</p>
                            <p><span>毕业院校</span>{{ coachData.graduatedFrom }}</p>
                            <p><span>联系电话</span>{{ coachData.phone }}</p>
                            <p><span>微信</span>{{ coachData.weChatNo }}</p>
                        </div>
                        <div class="organ-con-center-item">
                            <p><span>邮箱</span>{{ coachData.mail }}</p>
                            <p><span>证件号码</span>{{ coachData.leaderNo }}</p>
                            <p><span>联系地址</span>{{ coachData.address }}</p>
                            <p><span>语言能力</span>{{ coachData.yyName }}</p>
                            <p><span>鞋码</span>{{ coachData.shoeSize }}</p>
                        </div>
                    </div>
                </div>

                <p class="title">证书</p>
                <div class="organ-book display-flex-row">
                    <div class="organ-book-item">
                        <img src="/images/book01.jpg"/>
                        <p>证书名称 {{ coachData.certificateName }}</p>
                        <p>证书编号 {{ coachData.certificateNo }}</p>
                    </div>
                    <div class="organ-book-item">
                        <img src="/images/book02.jpg"/>
                        <p>其他证书 {{ coachData.elseCertificate }}</p>
                    </div>
                    <!-- <div class="organ-book-item">
                              <img src="/images/book03.jpg"/>
                          </div> -->
                </div>

                <p class="title">课程</p>
                <div class="hasbuy display-flex-row">
                    <img src="/images/hasbuyl.png" class="hasbuy-prev"/>
                    <img src="/images/hasbuyr.png" class="hasbuy-next"/>
                    <div class="hasbut-item" v-for="i in TeachingListData">
                        <img :src="i.imgs|filtersImg"/>
                    </div>

                </div>
                <p class="title">教案</p>
                <div class="hasbuy display-flex-row">
                    <img src="/images/hasbuyl.png" class="hasbuy-prev"/>
                    <img src="/images/hasbuyr.png" class="hasbuy-next"/>
                    <div class="hasbut-item" v-for="i in PlanList">
                        <img :src="i.imgs|filtersImg"/>
                    </div>
                    <!-- <div class="hasbut-item">
                              <img src="/images/hasbuy02.jpg">
                          </div>
                          <div class="hasbut-item">
                              <img src="/images/hasbuy01.jpg">
                          </div> -->
                </div>
                <p class="title">球员</p>
            </div>
            <el-table
                    :header-cell-style="{ background: '#F7F7F7', color: '#333333' }"
                    ref="multipleTable"
                    :data="tableData"
                    stripe
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column width="55"></el-table-column>
                <!-- <el-table-column label="序号" width="120">
                  <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column> -->
                <el-table-column prop="name" label="球员" width="200">
                    <!--插入图片链接的代码-->
                    <template slot-scope="scope">
                        <img
                                :src="scope.row.imgs|filtersImg"
                                alt=""
                                style="width: 36px;height: 36px;margin:1px;border:1px solid #BBBDBF;vertical-align: middle;"
                        />
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="goodLocation"
                        label="擅长位置"
                        show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="wound" label="伤病" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="count" label="课程" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="groupingName" label="分组" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div class="organ_pagination">
                <el-pagination
                        :hide-on-single-page="value"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        @current-page="currentPage4"
                        :page-size="5"
                        layout="total, prev, pager, next"
                        :total="total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>

    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import Wang from "wangeditor";
    import {mapActions, mapState} from "vuex";
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb
        },
        data() {
            return {
                id: "",
                tableData: [],
                multipleSelection: [],
                value: "",
                coachData: {},
                PlanList: "", //我的教案
                findListData: "",
                total: 0,
                TeachingListData: "",//我的课程
            };
        },
        mounted() {
            this.id = this.$route.query.id;
            console.log(this.id);
            this.coachDetail({id: this.id}).then(res => {
                const {code, data} = res;
                if (code === 200) {
                    console.log(data);
                    this.coachData = data;
                }
            });
            this.TeachingPlanList();
            this.findList();
            this.TeachingList();
        },
        methods: {
            ...mapActions("organ", [
                "coachDetail", //教练详情
                "getTeachingPlanList", //我的教案
                "getfindList", //我的球员
                "getTeachingList" //-我的课程
            ]),
            TeachingPlanList() {
                let data = {id: this.id, pageNum: 0, pageSize: 0};
                this.getTeachingPlanList(data).then(res => {
                    const {
                        code,
                        data,
                        data: {list, total}
                    } = res;
                    if (code === 200) {
                        console.log(total);
                        this.PlanList = list;
                    }
                });
            },
            findList() {
                let data = {
                    coachId: this.id,
                    name: "",
                    pageNum: 1,
                    pageSize: 10
                };
                this.getfindList(data).then(res => {
                    const {
                        code,
                        data,
                        data: {list, total}
                    } = res;
                    if (code === 200) {
                        console.log(data);
                        this.tableData = list;
                        this.total = total;
                    }
                });
            },
            TeachingList() {
                let data = {
                    coachId: this.id,
                    courseType: 0,
                    pageNum: 0,
                    pageSize: 0
                };
                this.getTeachingList(data).then(res => {
                    const {
                        code,
                        data,
                        data: {list, total}
                    } = res;
                    if (code === 200) {
                        console.log(data);
                        this.TeachingListData = list;
                    }
                });
            },
            handleSelectionChange() {
            },
            currentPage4(val) {
                console.log(val);
            },
            handleClick(row) {
                console.log(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    };
</script>

<style scoped>
    @import url("porgan.css");
    @import url("/css/swiper.min.css");
</style>
